<template>
  <div class="all">
    <div class="loginInfo" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <h1>学生成绩可视化系统</h1>
     <span> 用户名: <el-input placeholder="用户名" v-model="code" clearable style="width:400px" class="item"></el-input></span>
      <span>密码: <el-input placeholder="请输入密码" v-model="password" show-password style="width:400px" class="item"></el-input></span><br><br>
      <!-- <span>身份: <el-select v-model="identity" clearable placeholder="请选择" style="width:200px" class="item">
        <el-option value="学生">学生</el-option>
        <el-option value="教师">教师</el-option>
      </el-select></span> -->
      <span>选择登录身份:
        <el-radio v-model="identity" label="学生">学生</el-radio>
      <el-radio v-model="identity" label="教师">教师</el-radio>
      </span>
      <el-button type="primary" round @click="login" style="width:100px" class="item">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginPage",
  data() {
    return {
      loading:false,
      code: "",
      password: "",
      identity: ""
    };
  },
  methods: {
    async login() {
      this.loading = true
      await this.$API.call("/login", "post", "", {
          code: this.code,
          password: this.password,
          identity: this.identity
        })
        .then(res => {
          if (res.data.success) {
            this.loading = false
            sessionStorage.setItem("token", res.data.token);
            sessionStorage.setItem("code", res.data.code);
            sessionStorage.setItem("identity", res.data.identity);
            sessionStorage.setItem("grade", res.data.grade);
            this.$router.push({
              name: "homeInfo"
            });
            window.location.reload();//让页面刷新,重新加载数据
          } else {
            alert(res.data.msg);
            this.code = "";
            this.password = "";
            this.loading = false
          }
        });
    }
  }
};
</script>

<style lang="less" sceoped>
.all {
  .loginInfo {
    margin: 250px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 500px;
    border: 2px solid skyblue;
    .item{
      margin-top: 40px;
    }
  }
}
</style>